<!DOCTYPE html>
<html>

<head>
    <title>贪吃蛇</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }
        
        #game-board {
            width: 400px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .snake {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }
        
        .food {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <h1>贪吃蛇</h1>
    <div id="game-board"></div>
    <p>使用 WSAD 或方向键控制贪吃蛇的移动。</p>
    <button id="start-button">开始</button>
    <button id="pause-button">暂停</button>
    <script type="text/javascript">
        var gameBoard = document.getElementById('game-board');
        var score = 0;

        // 创建贪吃蛇的初始头部和身体
        var snake = [{
            x: 160,
            y: 160
        }, {
            x: 140,
            y: 160
        }, {
            x: 120,
            y: 160
        }];

        // 创建食物
        var food = {
            x: Math.floor(Math.random() * 20) * 20,
            y: Math.floor(Math.random() * 20) * 20
        };

        // 绘制贪吃蛇和食物
        function draw() {
            gameBoard.innerHTML = '';
            snake.forEach(function(segment) {
                var snakeElement = document.createElement('div');
                snakeElement.style.left = segment.x + 'px';
                snakeElement.style.top = segment.y + 'px';
                snakeElement.classList.add('snake');
                gameBoard.appendChild(snakeElement);
            });
            var foodElement = document.createElement('div');
            foodElement.style.left = food.x + 'px';
            foodElement.style.top = food.y + 'px';
            foodElement.classList.add('food');
            gameBoard.appendChild(foodElement);
        }

        // 移动贪吃蛇
        function move() {
            var head = snake[0];
            var tail = snake.pop();
            tail.x = head.x + snakeDirection.x;
            tail.y = head.y + snakeDirection.y;
            snake.unshift(tail);
        }

        // 判断是否撞墙或自杀
        function endGame() {
            var head = snake[0];
            if (head.x < 0 || head.x >= 400 || head.y < 0 || head.y >= 400) {
                return true;
            }
            for (var i = 1; i < snake.length; i++) {
                if (head.x == snake[i].x && head.y == snake[i].y) {
                    return true;
                }
            }
            return false;
        }

        // 随机生成食物位置，重新开始游戏
        function restartGame() {
            score = 0;
            snake = [{
                x: 160,
                y: 160
            }, {
                x: 140,
                y: 160
            }, {
                x: 120,
                y: 160
            }];
            food = {
                x: Math.floor(Math.random() * 20) * 20,
                y: Math.floor(Math.random() * 20) * 20
            };
            snakeDirection = {
                x: 20,
                y: 0
            };
        }

        // 处理方向键或 WSAD 按下事件
        function handleKeyDown(event) {
            switch (event.keyCode) {
                case 37: // 左箭头
                case 65: // A
                    if (snakeDirection.x != 20) {
                        snakeDirection = {
                            x: -20,
                            y: 0
                        };
                    }
                    break;
                case 38: // 上箭头
                case 87: // W
                    if (snakeDirection.y != 20) {
                        snakeDirection = {
                            x: 0,
                            y: -20
                        };
                    }
                    break;
                case 39: // 右箭头
                case 68: // D
                    if (snakeDirection.x != -20) {
                        snakeDirection = {
                            x: 20,
                            y: 0
                        };
                    }
                    break;
                case 40: // 下箭头
                case 83: // S
                    if (snakeDirection.y != -20) {
                        snakeDirection = {
                            x: 0,
                            y: 20
                        };
                    }
                    break;
                default:
                    break;
            }
        }

        // 主循环函数
        function main() {
            move();
            if (endGame()) {
                clearInterval(gameLoop);
                alert('游戏结束！得分：' + score);
                restartGame();
                draw();
                return;
            }
            var head = snake[0];
            if (head.x == food.x && head.y == food.y) {
                snake.push({
                    x: 0,
                    y: 0
                });
                score += 10;
                food = {
                    x: Math.floor(Math.random() * 20) * 20,
                    y: Math.floor(Math.random() * 20) * 20
                };
            }
            draw();
        }

        // 初始化游戏
        var snakeDirection = {
            x: 20,
            y: 0
        };
        draw();
        var gameLoop;
        var isPaused = true;

        // 开始按钮事件监听
        var startButton = document.getElementById('start-button');
        startButton.onclick = function() {
            if (isPaused) {
                gameLoop = setInterval(main, 100);
                document.addEventListener('keydown', handleKeyDown);
                isPaused = false;
            }
        }

        // 暂停按钮事件监听
        var pauseButton = document.getElementById('pause-button');
        pauseButton.onclick = function() {
            if (!isPaused) {
                clearInterval(gameLoop);
                document.removeEventListener('keydown', handleKeyDown);
                isPaused = true;
            }
        }
    </script>
</body>

</html>